<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf8" />
    <meta id="viewport" name="viewport"
        content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;" />
    <title></title>


    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

    <input type="hidden" th:value="${userId}" name="userId" id="userId" />
    <style type="text/css">
        body,
        p,
        ul,
        li,
        h1,
        h2,
        form,
        input {
            margin: 0;
            padding: 0;
        }

        h1,
        h2 {
            font-size: 100%;
        }

        ul {
            list-style: none;
        }

        body {
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            font-family: Helvetica;
            background: #ECECEC;
        }

        html,
        body {
            height: 100%;
        }

        a,
        button,
        input,
        img {
            -webkit-touch-callout: none;
            outline: none;
        }

        a {
            text-decoration: none;
        }


        .hide {
            display: none !important;
        }

        .cf:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        a[class*="btn"] {
            display: block;
            height: 42px;
            line-height: 42px;
            color: #FFFFFF;
            text-align: center;
            border-radius: 5px;
        }

        .btn-blue {
            background: #3D87C3;
            border: 1px solid #1C5E93;
        }

        .btn-green {
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43C750), color-stop(1, #31AB40));
            border: 1px solid #2E993C;
            box-shadow: 0 1px 0 0 #69D273 inset;
        }

        .charge {
            font-family: Helvetica;
            padding-bottom: 10px;
            -webkit-user-select: none;
        }

        .charge h1 {
            height: 44px;
            line-height: 44px;
            color: #FFFFFF;
            background: #3D87C3;
            text-align: center;
            font-size: 20px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .charge h2 {
            font-size: 14px;
            color: #777777;
            margin: 5px 0;
            text-align: center;
        }

        .charge .content {
            padding: 10px 12px;
        }

        .charge .select li {
            position: relative;
            display: block;
            float: left;
            width: 100%;
            margin-right: 2%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            border: 1px solid #BBBBBB;
            color: #666666;
            font-size: 16px;
            margin-bottom: 5px;
            border-radius: 3px;
            background-color: #FFFFFF;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }

        .charge .price {
            border-bottom: 1px dashed #C9C9C9;
            padding: 10px 10px 15px;
            margin-bottom: 20px;
            color: #666666;
            font-size: 12px;
        }

        .charge .price strong {
            font-weight: normal;
            color: #EE6209;
            font-size: 26px;
            font-family: Helvetica;
        }

        .charge .showaddr {
            border: 1px dashed #C9C9C9;
            padding: 10px 10px 15px;
            margin-bottom: 20px;
            color: #666666;
            font-size: 12px;
            text-align: center;
        }

        .charge .showaddr strong {
            font-weight: normal;
            color: #9900FF;
            font-size: 26px;
            font-family: Helvetica;
        }

        .charge .copy-right {
            margin: 5px 0;
            font-size: 12px;
            color: #848484;
            text-align: center;
        }


        .charge .selectImg li {
            position: relative;
            display: block;
            float: left;
            width: 100%;
            margin-right: 2%;
            text-align: center;
            border: 1px solid #BBBBBB;
            color: #666666;
            font-size: 16px;
            margin-bottom: 5px;
            border-radius: 3px;
            background-color: #FFFFFF;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <article class="charge">

    </article>
    <input type="hidden" th:value="${title}" id="title" />
    <input type="hidden" th:value="${desc}" id="desc" />
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="/js/zepto.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<script type="text/javascript">
    var shareTime = [[${shareTime}]];
    $(function () {
        var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
                window.location.reload();
            }
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        });
    })

    $(function () {
        $.showLoading("加载中");
        $.ajax({
            url: "/wechat/createJsapiSignature",
            async: true,
            type: "GET",
            dataType: "json",
            async: true,
            data: {
                "url": location.href.split("#")[0]
            },
            success: function (data) {
                $.hideLoading();
                //设置配置文件
                wx.config({
                    debug: false,       //调试模式是否开启，开启则在PC端控制台console里面打印，在手机端就是弹出状态吗
                    appId: data.appId,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: [
                        'onMenuShareTimeline',       //分享到朋友圈
                        'onMenuShareAppMessage',    //分享给朋友
                        'onMenuShareQQ',           //分享给QQ好友
                        'onMenuShareQZone'        //分享到QQ空间
                    ]
                });
                //调用接口
                wx.ready(function () {
                    //掉用分享给朋友的接口，这里只做分享给朋友，分享到其他地方以此类推
                    wx.onMenuShareAppMessage({
                        title: $("#title").val(), // 分享标题
                        desc: $("#desc").val(), // 分享描述
                        link: data.url, // 分享链接，注意：该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: "http://pic.616pic.com/ys_b_img/00/04/24/kjweTwwcFM.jpg", // 分享图标
                        success: function (res) {
                            console.log('分享成功')
                        }
                    });

                    setTimeout(function () {
                        window.location.href = "/index?userId=" + $("#userId").val();
                    }, shareTime);
                });

                setTimeout(function () {
                    window.location.href = "/index?userId=" + $("#userId").val();
                }, shareTime);

            },
            error: function () {
                console.log("二次分享错误！");
                window.location.href = "/index?userId=" + $("#userId").val();
            }
        });
    });




</script>

</html>